import { Component } from "react";
import { Switch, Route, Redirect } from "react-router-dom";
import { Layout, Button, Breadcrumb } from "antd";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import { getStorage } from "../../utils";
import Login from "../login/login";
import LeftNav from "../../components/leftNav/leftNav";
import Header from "../../components/header/header";
import Home from "../home/home";
import User from "../user/user";
import Role from "../role/role";
import Personal from "../charts/personal/personal";
import Team from "../charts/team/team";
import Kda from "../charts/kda/kda";
import menuList from "../../router/index";
import logo from "../../assets/images/login/logo.png";
import "./admin.less";

const { Footer, Sider, Content } = Layout;

export default class admin extends Component {
  state = {
    collapsed: false,
    breadcrumb: [{ title: "首页" }],
  };

  // 菜单缩小变大
  toggleCollapsed = () => {
    this.setState({ ...this.state, collapsed: !this.state.collapsed });
  };

  setBreadcrumb = (pathname: string) => {
    let arr = this.searchParent(menuList, pathname);
    let breadcrumbList = arr.map((item: any) => {
      return { title: item.label };
    });
    // console.log("breadcrumbList:", breadcrumbList);
    this.setState({
      ...this.state,
      breadcrumb: breadcrumbList,
    });
  };
  searchParent = (map: Array<any>, key: string) => {
    let t = [];
    for (let i = 0; i < map.length; i++) {
      const e = map[i];
      if (e.key === key) {
        //若查询到对应的节点，则直接返回
        t.push(e);
        break;
      } else if (e.children && e.children.length !== 0) {
        //判断是否还有子节点，若有对子节点进行循环调用
        let p: any = this.searchParent(e.children, key);
        //若p的长度不为0，则说明子节点在该节点的children内，记录此节点，并终止循环
        if (p.length !== 0) {
          p.unshift(e);
          t = p;
          break;
        }
      }
    }
    return t;
  };

  render() {
    const userInfo = getStorage("userInfo");
    if (!userInfo || !userInfo.userName) {
      return <Redirect to="/login" component={Login}></Redirect>;
    }

    return (
      <Layout style={{ minHeight: "100vh" }}>
        <Sider collapsed={this.state.collapsed}>
          <div className="menuTop">
            {this.state.collapsed ? "" : <img src={logo} alt="" />}
            <Button
              type="primary"
              onClick={this.toggleCollapsed}
              style={{ marginLeft: 10 }}
            >
              {this.state.collapsed ? (
                <MenuUnfoldOutlined />
              ) : (
                <MenuFoldOutlined />
              )}
            </Button>
          </div>
          <LeftNav setBreadcrumb={this.setBreadcrumb}></LeftNav>
        </Sider>
        <Layout>
          <Header></Header>
          <Breadcrumb className="breadCrumb" items={this.state.breadcrumb} />
          <Content
            style={{
              margin: "0 16px",
              backgroundColor: "white",
              padding: "16px",
            }}
          >
            <Switch>
              <Route path="/home" component={Home}></Route>
              <Route path="/user" component={User}></Route>
              <Route path="/role" component={Role}></Route>
              <Route path="/charts/personal" component={Personal}></Route>
              <Route path="/charts/team" component={Team}></Route>
              <Route path="/charts/kda" component={Kda}></Route>
              <Redirect to="/home"></Redirect>
            </Switch>
          </Content>
          <Footer style={{ textAlign: "center", backgroundColor: "aliceblue" }}>
            <p>做大做强再创辉煌&reg; 版权所有 All Rights Reserved.</p>
          </Footer>
        </Layout>
      </Layout>
    );
  }
}
